<template>
  <div>
    <div class="bottom-container">
      <van-nav-bar title="生成二维码" left-text="返回" left-arrow v-back />
      <upload-pic @iconChange="iconChange"></upload-pic>
      <div class="register-tip" v-show="this.form.icon == ''">图片可作为二维码中的图标使用</div>
      <van-cell-group>
        <van-cell title="二维码大小">
          <van-radio-group v-model="form.size" class="qr-size">
            <van-radio name="200">200</van-radio>
            <van-radio name="400">400</van-radio>
            <van-radio name="600">600</van-radio>
            <van-radio name="1000">1000</van-radio>
          </van-radio-group>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="img-container" v-show="imgUrl !== ''">
      <img :src="imgUrl" alt="">
      <div class="img-container__tip">长按保存图片哦~</div>
      <van-button style="margin-top: 10px" type="primary" size="small" @click="closeImg">关闭</van-button>
    </div>
    <van-button class="bottom-btn" size="large" @click="generate" type="info">点击生成二维码</van-button>
  </div>
</template>

<script>
  import UploadPic from '@/components/UploadPic'
  import {mapState} from 'vuex'
  export default {
    components: {
      UploadPic
    },
    computed: {
      ...mapState(['stationInfo']),

    },
    data() {
      return {
        form: {
          icon: '',
          size: '200'
        },
        imgUrl: ''
      }
    },
    mounted() {
      this.$reqGet('/qrcode/getQrcodeInfo', {
        stationId: this.stationInfo.id,
      }).then(res => {
        if (res.data && res.data.qrcodeUrl) {
          this.imgUrl = res.data.qrcodeUrl
        }
      });
    },
    methods: {
      //注册
      generate() {
        this.$reqGet('/qrcode/generate', {
          stationId: this.stationInfo.id,
          size: this.form.size,
          logoPath: this.form.icon
        }).then(res => {
          if (res.data) {
            this.imgUrl = res.message
          }
        });
      },
      //头像改变
      iconChange(val) {
        this.form.icon = val;
      },
      closeImg () {
        this.imgUrl = ''
      }
    }
  }

</script>
<style lang="less" scoped>
  .register-tip {
    margin-bottom: 10px;
    text-align: center;
    font-size: 12px;
    color: #999;
  }
  .img-container {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 99;
    text-align: center;
    background: rgba(0,0,0,0.5);
    img {
      width: 70%;
      margin-top: 100px;
    }
    .img-container__tip {
      margin-top: 10px;
      color: #fff;
    }
  }

</style>
